<template>
	<div>
		<jk-table
			ref="frontGroupSalaryMonthReportTable"
			border
			:show-footer="true"
			:footer-method="footerMethod"
			:cell-style="cellStyle"
			:data="tableData"
			:height="height"
			:loading="loading"
		>
			<vxe-column
				v-for="(item, index) in tableColumnList"
				:key="index"
				:title="item.title"
				:align="item.align"
				:field="item.keyName"
				:sortable="item.sortable"
				:fixed="item.fixed ? item.fixed : ''"
				:min-width="item.minWidth"
				:width="item.width"
			>
				<template slot-scope="scope">
					<span v-if="item.keyName === 'deviceRecordNumber'" @click="onMachine(scope.row)">{{ scope.row.deviceRecordNumber }}</span>
					<span v-else-if="item.keyName === 'machineEfficiency'">{{ scope.row.machineEfficiency !== null ? scope.row.machineEfficiency + '%' : '' }}</span>
					<span v-else>{{ scope.row[item.keyName] }}</span>
				</template>
			</vxe-column>
		</jk-table>
		<detail-dialog
			:search-params="searchParams"
			:data-id="dataId"
			:page-type="pageType"
			:data-item="selectedRowItem"
			:dialog-state="saveDialogState"
			@on-visible-change="onVisibleChange"
		></detail-dialog>
	</div>
</template>

<script>
    import detailDialog from './detail-dialog';
    import XEUtils from 'xe-utils';
    export default {
        components: { detailDialog },
        props: {
            tableData: {
                type: Array,
                default() {
                    return [];
                }
            },
            tableColumnList: {
                type: Array,
                default() {
                    return [];
                }
            },
            searchParams: {
                type: Object,
                default() {
                    return {};
                }
            },
            height: {
                type: [String, Number],
                default: 0
            },
            loading: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                selectedRowItem: {},
                saveDialogState: false,
                noCalKey: ['iotKg', 'outputKg', 'reportKg'],
                noCalKeys: ['iotDiffReport', 'iotDiffOutput', 'outputDiffReport'], // difference
                pageType: '',
                dataId: null
            };
        },
        methods: {
            percentageToDecimal(percentage) {
                const decimal = parseFloat(percentage) / 100;
                return decimal;
            },
            // 0.1%
            cellStyle({ row }) {
                const num = row.iotDiffReport;
                const numa = num ? num.slice(0, -1) : 0; // 移除最后一个字符（百分号）
                const iotDiffReport = Number(numa);
                const num1 = row.iotDiffOutput;
                const numa1 = num1 ? num1.slice(0, -1) : 0; // 移除最后一个字符（百分号）
                const iotDiffOutput = Number(numa1);
                const num2 = row.iotDiffOutput;
                const numa2 = num2 ? num2.slice(0, -1) : 0; // 移除最后一个字符（百分号）
                const outputDiffReport = Number(numa2);
                const result = this.percentageToDecimal(iotDiffReport);
                const result1 = this.percentageToDecimal(iotDiffOutput);
                const result2 = this.percentageToDecimal(outputDiffReport);
                if (result > 0.001 || result1 > 0.001 || result2 > 0.001 || result < 0 || result1 < 0 || result2 < 0) {
                    return {
                        boxShadow: 'inset 0 0 0px 0.5px #ff4949',
                        backgroundColor: '#FF8081',
                        color: '#fff'
                    };
                }
            },
            mergeColMethod({ row, _rowIndex, column, visibleData }) {
                const prevRow = visibleData[_rowIndex - 1];
                let nextRow = visibleData[_rowIndex + 1];
                if (column.property === 'belongDate') {
                    if (prevRow && prevRow.belongDate === row.belongDate) {
                        return { rowspan: 0, colspan: 0 };
                    } else {
                        let countRowspan = 1;
                        while (nextRow && nextRow.belongDate === row.belongDate) {
                            nextRow = visibleData[++countRowspan + _rowIndex];
                        }
                        if (countRowspan > 1) {
                            return { rowspan: countRowspan, colspan: 1 };
                        }
                    }
                }
            },
            footerMethod({ columns, data }) {
                return [
                    columns.map((column, columnIndex) => {
                        if (columnIndex === 0) {
                            return `合计`;
                        }
                        if (this.noCalKey.includes(column.property)) {
                            return XEUtils.sum(data, column.property);
                        } else if (this.noCalKeys.includes(column.property)) {
                            return `${(XEUtils.sum(data, column.property)).toFixed(2)}%`;
                        }
                        return null;
                    })
                ];
            },
            // 详情
            particulars(id) {
                this.pageType = 'detail';
                this.dataId = id;
                this.saveDialogState = true;
            },
            /** 修改按钮操作 */
            onEditBtn(id) {
                this.pageType = 'edit';
                this.dataId = id;
                this.saveDialogState = true;
            },
            onVisibleChange(e) {
                this.saveDialogState = e;
                this.$emit('getListRequest');
            },
            onMachine(rowItem) {
                this.selectedRowItem = rowItem;
                if (rowItem.deviceRecordNumber.includes('LT') || rowItem.deviceRecordNumber.includes('lt')) {
                    // this.detailDialogState = true;
                }
            }
        }
    };
</script>
